<template>
  <PageContainer title="价格管理">
    <div class="disposal-pricing">
      <el-card>
        <el-table :data="pricingList" stripe>
          <el-table-column prop="wasteType" label="垃圾类型" width="150" />
          <el-table-column prop="pricePerKg" label="单价(元/kg)" width="120" />
          <el-table-column prop="pointsPerKg" label="积分(分/kg)" width="120" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
                {{ row.status === 'active' ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="180" />
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="editPrice(row)">编辑</el-button>
              <el-button type="warning" size="small" @click="toggleStatus(row)">
                {{ row.status === 'active' ? '禁用' : '启用' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import PageContainer from '@/components/PageContainer.vue'

const pricingList = ref([
  {
    wasteType: '可回收物',
    pricePerKg: 2.0,
    pointsPerKg: 10,
    status: 'active',
    updateTime: '2024-01-20 10:00:00'
  },
  {
    wasteType: '有害垃圾',
    pricePerKg: 1.5,
    pointsPerKg: 8,
    status: 'active',
    updateTime: '2024-01-20 10:00:00'
  }
])

const editPrice = (row: any) => {
  ElMessage.info(`编辑 ${row.wasteType} 价格`)
}

const toggleStatus = (row: any) => {
  row.status = row.status === 'active' ? 'inactive' : 'active'
  ElMessage.success('状态已更新')
}
</script>